<template>
  <div class="manage-plan">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap">
        <el-form
          ref="formRef"
          label-position="left"
          :model="params"
          label-width="auto"
        >
          <el-row :gutter="50" style="margin-top: 30px">
            <el-col :span="6">
              <el-form-item label="行政区划：">
                <el-select v-model="params.a" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称：">
                <el-input v-model="params.b" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6"
              ><el-form-item label="起始年份：">
                <el-date-picker
                  v-model="params.q"
                  type="year"
                  placeholder="请选择"
                  clearable
                  format="YYYY"
                  value-format="YYYY"
                /> </el-form-item
            ></el-col>
            <el-col :span="6"
              ><el-form-item label="结束年份：">
                <el-date-picker
                  v-model="params.q"
                  type="year"
                  placeholder="请选择"
                  clearable
                  format="YYYY"
                  value-format="YYYY"
                /> </el-form-item
            ></el-col>
          </el-row>

          <el-row :gutter="50" style="margin-top: 2px">
            <el-col :span="6">
              <el-form-item label="状态：">
                <el-select v-model="params.a" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" :icon="ArrowLeft" @click="handleSearch"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询
              </el-button>

              <el-button
                type="primary"
                style="
                  background-color: #009944;
                  border-color: transparent;
                  margin-left: 24px;
                "
                :icon="ArrowLeft"
                @click="handleSearch"
              >
                <Svg name="shangchuan" style="margin-right: 3px;" color="#fff" width="18" height="18" > </Svg>
                导出</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="data-wrap">
      <el-table
        :data="tableData"
        border
        class="table-height"
        style="width: 100%"
      >
        <el-table-column type="selection" align="center" width="65" />
        <el-table-column prop="date" align="center" label="行政区划" />
        <el-table-column prop="name" align="center" label="企业名称" />
        <el-table-column prop="address" align="center" label="年度" />
        <el-table-column prop="address" align="center" label="产废类别" />
        <el-table-column prop="address" align="center" label="产废量" />
        <el-table-column prop="address" align="center" label="处置量" />
        <el-table-column prop="address" align="center" label="提交时间" />
        <!-- <el-table-column prop="address" align="center" label="操作">
          <template #default v-solt="{ row }">
            <button>查看详情</button>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="padding-right: 60px; margin-top: 25px">
        <Pagination
          :currentPage="params.currentPage"
          :total="total"
          :page-size="params.pageSize"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";

let params = reactive({});
let handleSearch = () => {};
let total = ref(11);
let tableData = ref([
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
  { date: "浮点数" },
]);
let options = [
  {
    value: "fds",
    label: "fds",
  },
  {
    value: "ffds佛挡杀",
    label: "fd佛挡杀s",
  },
];
</script>
<style lang="scss" scoped>
.manage-plan {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .title-wrap {
    height: 192px;
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      padding-left: 35px;
      padding-right: 43px;
    }
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 192px);
    background: #fff;
    padding: 10px 8px 0 8px;
    .table-height {
      max-height: calc(100vh - 41.1vh);
      overflow-y: scroll;

      button {
        width: 115px;
        height: 39px;
        background: #e5efff;
        border-radius: 5px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
    }
  }
}
</style>
